<template>
  <view>
    <view class="shop__car--top" :style="'top:' + navigationBarHeight + 'px'">
      <view class="shop__car--top--container"
        :style="'border-radius:0px;justify-content:' + (shopCarList.length>0 || shopLoseCarList.length>0)?'space-between':'center'">
        <view @tap="getCoupon" v-if="shopCarList.length>0 || shopLoseCarList.length>0" style="font-size:28rpx">
          领券
        </view>
        <view v-if="shopCarList.length>0 || shopLoseCarList.length>0" style="font-size:28rpx">
          <view v-if="!editFlag" @tap="eidtList">编辑</view>
          <view v-else @tap="eidtFinish">完成</view>
        </view>
      </view>
    </view>
    <pop v-if="popType==='coupon'" :showType="showType" :couponList="couponList" @myCouponGet="myCouponGet"  @close="popClose"></pop>
    <sku v-else :showType="showType" :couponList="couponList" :goodDetail="goodDetail" :norms="norms"
      @addShopCar="addShopCar" @close="closeSku" @checkNorms="checkNorms"></sku>
    <view class="shop__car" v-if="shopCarList.length>0 || shopLoseCarList.length>0">
      <view class="shop__car--goods">
        <view v-for="(good, goodIndex) in shopCarList" :key="goodIndex" class="shop__car--container"
          style="height:140px;box-shadow: 0px 0px 6px #EBEBEB">
          <view v-if="good.status===1" class="shop__car--container--item">
            <!-- <u-checkbox-group> -->
              <!-- <u-checkbox v-model="good.isCheck" shape="circle" @change="onChange" activeColor="#FF4444" style="margin-right:10px"
                :data-index="goodIndex" :data-item="good" :disabled="good.checkStock===0"></u-checkbox> -->
                <cus-radio :value="good.isCheck" :index="goodIndex" @change="onChange" style="margin-right:10px"/>
            <!-- </u-checkbox-group> -->
            <!-- radio -->
            <!-- 加入购物车商品 -->
            <goods :good="good" :index="goodIndex" :checkStock="good.checkStock" @getSku="getSku"
              @changeNum="changeNum">
              <stepper :index="goodIndex" :good="good" :num="good.goodsNumber" :stockNum="good.checkStock"
                :perLimit="good.perLimit" v-if="good.status===1" @changeNum="changeNum" @delGood="delGood"></stepper>
            </goods>
          </view>
        </view>
      </view>
      <!-- 购物车失效商品 -->
      <unusable :shopLoseCarList="shopLoseCarList" @emptyUseless="emptyUseless"></unusable>
      <view class="pageBottom">
        <view class="pageBottom__check">
          <u-checkbox-group v-model="selectAll" >
            <u-checkbox @change="chooseAll"  shape="circle" activeColor="#FF4444" style="font-size:13px;"
              :disabled="shopCarList.length===0 && shopLoseCarList.length>0 ? true : false"
              :name="true"
              label="全选"
              >
            </u-checkbox>
          </u-checkbox-group>
          <view view class="pageBottom__check--allPrice" v-if="!editFlag">
            <span style="font-size:15px">合计:</span>
            <span class="pageBottom__check--allPrice--price">￥{{allPrice}}</span>
          </view>
        </view>
        <view class="pageBottom__button" v-if="!editFlag" @tap="submit">
          结算({{selectList.length}})
        </view>
        <view v-else style="display:flex">
          <view class="moveCollect" @tap="addCollect">移入收藏夹</view>
          <view class="pageBottom__delBtn" @tap="deleteButton">删除</view>
        </view>
      </view>
      <!-- 弹窗显示优惠券或规格 -->
    </view>
    <view v-else :style="'height:' + pageHeight + 'px;background-color:white'">
      <view class="shopNoCar">
        <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/noCar.png" class="shop__noCar"></image>
        <view class="shop__noCar--text">你的购物车空空如也</view>
        <view class="shop__noCar--buyButton" @tap="gotoHome">去下单</view>
      </view>
    </view>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import {
    getCarsList,
    delCarsList,
    editCarsList,
    emptyCarsList,
    changeType,
  } from "@/api/modules/shopCar";
  import {
    userAddCollect
  } from "@/api/modules/goods";
  import {
    getOneCoupon,
    getCouponIndex
  } from "@/api/modules/coupon";
  import {
    getMemberCardInfo
  } from "@/api/modules/member";
  import goods from "./components/goods/goods.vue";
  import unusable from "./components/unusable/unusable.vue";
  import pop from "./components/pop/pop.vue";
  import sku from "./components/pop/sku/sku.vue";
  import stepper from "@/components/stepper/stepper.vue";
  import mIcon from "@/components/m-icon/m-icon.vue"
  import cusRadio from '@/components/cus-radio/cus-radio.vue'
  @Component({
    components: {
      goods,
      unusable,
      pop,
      sku,
      stepper,
      mIcon,
      cusRadio
    }
  })
  export default class ShopCar extends Vue {
    @Prop()
    navigationBarHeight: string = ""
    /** 购物车商品 */
    shopCarList: Array < any >= []
    temShopList: Array < any >= []

    /** 显示不显示顶部模式 */
    shopType: boolean = true
    /** 失效商品 */
    shopLoseCarList: Array < any >= []
    /** 编辑状态 */
    editFlag: boolean = false
    /** 全选状态 */
    selectAll=[]
    // 全选状态数组
    selectAllList=[{
      name:'全选',
      disabled:false
    },{
      name:'取消全选',
      disabled:false
    }]
    /** 选择数组 */
    selectList: Array < any >= []
    /** 弹窗状态 */
    showType: boolean = false
    /** 弹窗内容类型 */
    popType: string = "coupon"

    /** 可领取优惠数组 */
    couponList: Array < any >= []

    /** 选中商品 */
    goodDetail: any = {}

    /** 选中商品所选规格 */
    norms: any = {}

    /** 商品总价 */
    allPrice: string = "0.00"

    /** iPhone11 设置底部按钮 */
    isPhone11: number | boolean = 46

    /** 是否添加收藏 */
    isAddCollect: boolean = false

    /** 加载中禁用 */
    canClick: boolean = false

    pageHeight: number = 0
    created() {
      this.getList();
      uni.setNavigationBarTitle({
        title: "购物车",
      });
    }

    /**
     * 移入收藏夹
     */
    addCollect() {
      const selectList = this.getSelectList();
      if (selectList.length === 0) {
        uni.showToast({
          title: "请选择要加入商品",
          icon: "none"
        });
        return;
      }
      const list = [] as any;
      selectList.forEach(item => {
        item.skuStocks.forEach(v => {
          if (v.id === item.skuId) {
            item.originalPrice = v.originalPrice;
          }
        });
        list.push({
          originalPrice: item.originalPrice,
          productId: item.productId,
          productName: item.productName,
          productPic: item.pic,
          productPrice: item.actPrice,
          status: item.status,
        });
      });
      userAddCollect(list)
        .then(() => {
          uni.showToast({
            title: "收藏成功",
            icon: "none"
          });
          this.isAddCollect = true;
          this.deleteButton();
        })
        .catch(err => {
          console.log(err);
        });
    }
    /** 订单提交 */
    submit() {
      const items = this.shopCarList
        .filter(item => item.isCheck)
        .map(item => {
          return {
            activityId: item.activityId,
            activityProductId: item.activityProductId,
            dominoState: item.dominoState,
            number: item.goodsNumber,
            skuId: item.skuId,
          };
        });
      if (!items.length) {
        uni.showToast({
          title: "请选择商品",
          icon: "none"
        });
        return;
      }
      uni.navigateTo({
        url: `/modules/pages/submit/submit?items=${encodeURIComponent(
        JSON.stringify(items),
      )}`,
      });
    }
    /**
     * 获取购物车列表
     */
    async getList() {
      this.$emit("shopCarChange", {}, {});
      let model = "";
      let isPhone11 = this.isPhone11;
      let selectAll = false;

      const v = uni.getSystemInfoSync();
      uni.getSystemInfo({
        success(result) {
          model = result.model;
          if (model === "iPhone XS<iPhone11,2>") {
            isPhone11 = 80;
          }
          if (
            model === "iPhone 11<iPhone12,1>" ||
            model === "iPhone XR<iPhone11,8>"
          ) {
            isPhone11 = 86;
          }
          if (model === "iPhone X (GSM+CDMA)<iPhone10,3>") {
            isPhone11 = 82;
          }
        },
      });
      const res = await getCarsList();
      let list = res;
      const useList: Array < any > = [];
      const noList: Array < any > = [];
      let shopType = false;
      if (!list) {
        this.shopCarList = useList
        this.temShopList = JSON.parse(JSON.stringify(useList))
        this.shopLoseCarList = noList
        this.allPrice = "0.00"
        this.isPhone11 =
          model === "iPhone XS<iPhone11,2>" ||
          model === "iPhone 11<iPhone12,1>" ||
          model === "iPhone XR<iPhone11,8>" ||
          model === "iPhone X (GSM+CDMA)<iPhone10,3>" ?
          true :
          false
        this.shopType = true
        this.selectAll = []
        this.pageHeight = v.windowHeight
        return;
      }
      const deliveryList = [] as any;
      list.forEach(item => {
          deliveryList.push(item);
      });
      if (!shopType) {
        list = deliveryList;
      }
      list.forEach((item, index) => {
        item.isCheck = false;
        item.itemIndex = index;
        item.skuList = [];
        item = this.dealPrice(item);
        const type = item.skuStocks.every(v => {
          return v.stock === 0;
        });
        item.status = type ? 2 : item.status;
        if (item.deleted === 1) {
          item.status = 2;
        }
        item.skuStocks.forEach((v, i) => {
          item.skuList.push(v.id);
          v.price = v.price === 0 ? v.originalPrice.toFixed(2) : v.price.toFixed(2);
          v.pointId = i;
          if (item.skuId === v.id) {
            item.price = v.price;
            item.perLimit = v.perLimit;
            item.pointId = v.pointId;
            item.checkStock = v.stock;
            item.pic = item.skuStocks.length > 1 ? v.pic : item.pic;
          }
        });
        item.status = item.skuList.indexOf(item.skuId) === -1 ? 0 : item.status;
        if (item.activityEndTime) {
          item.status =
            item.activityStatus === "1" || item.activityStatus === "0" ? 1 : 0;
        }
        if (item.status === 1) {
          useList.push(item);
          if (useList.length > 0) {
            useList.forEach(item => {
              item.isCheck = Boolean(item.selectStatus);
            });
            selectAll = useList.every(item => {
              return item.isCheck === true;
            });
          }
        } else {
          noList.push(item);
        }
      });

      this.shopCarList = useList
      this.temShopList = JSON.parse(JSON.stringify(useList))
      this.shopLoseCarList = noList
      this.allPrice = "0.00"
      this.isPhone11 = isPhone11
      this.shopType = shopType
      this.selectAll = [selectAll]
      this.pageHeight = v.windowHeight
      this.dealSelct();
      this.getAllPrice();
    }
    dealSelct() {
      const selectList = this.getSelectList();
      this.selectList = selectList
    }
    /**
     * 获得当前选中购物车价格
     */
    dealPrice(item) {
      item.skuStocks.forEach((v, i) => {
        if (v.id === item.skuId) {
          // item.actPrice = item.skuStocks[i].price;
          item.actPrice =
            item.skuStocks[i].price === 0 ?
            item.skuStocks[i].originalPrice :
            item.skuStocks[i].price;
          item.skuName = item.skuStocks[i].specs;
        }
      });
      return item;
    }
    /** 左侧选择商品 */
    onChange(e) {

      if (this.canClick) {
        // 加载过程中阻止用户再次点击
        return;
      }
      const id = [] as any;
      const currentIndex = e.index;
      const shopCarList = this.shopCarList;
      const selectList = [];
      const currentItem = shopCarList[currentIndex];

      currentItem.isCheck = !currentItem.isCheck;
      id.push(currentItem.skuId);
      const selectStatus = currentItem.selectStatus;
      this.canClick = true;
      uni.showLoading({
        title: "加载中",
      });
      changeType(selectStatus === 1 ? 0 : 1, id).then(() => {
        setTimeout(() => {
          uni.hideLoading();
          this.canClick = false;
          // this.getList();
        }, 100);
      });
      const selectAll = shopCarList.every(item => item.isCheck);
      shopCarList.forEach(item => {
        if (item.isCheck) {
          selectList.push(item);
        }
      });
      this.shopCarList[currentIndex].isCheck = currentItem.isCheck
      //   [`shopCarList[${currentIndex}].isCheck`]: currentItem.isCheck
      this.selectAll = [selectAll]
      this.selectList = selectList

      this.getAllPrice();
    }
    /**
     * 领券
     */
    getCoupon() {
      const couponList = [] as any;
      getCouponIndex({}).then(res => {
        res.forEach(item => {
          if (item.available > 0 && item.totalAvailable > 0) {
            couponList.push(item);
          }
        });
        couponList.forEach((item, index) => {
          item.hasUse = false;
          item.index = index;
          item.restNum =
            item.available > item.totalAvailable ?
            item.totalAvailable :
            item.available;
        });
        if (couponList.length === 0) {
          uni.showToast({
            title: "暂无可领取优惠券",
            icon: "none"
          });
          return;
        }
        this.$store.commit('settingStore/setTabVisible', false);
        this.showType = true
        this.popType = "coupon"
        this.couponList = couponList
      });
    }
    /**
     * 商品组件上点击规格
     */
    getSku(e) {
      const userInfo = this.$store.state.userStore.userInfo;
      const userMemberInfo = userInfo.infoExtends.memberInfo[0];
      // 用户会员状态 0未注册 1已注册 2会员到期
      // const state = userMemberInfo.state;
      const memRank = userMemberInfo.rankCode;
      // 会员持有等级
      const memberLevel = userMemberInfo.rankCode;

      this.$store.commit('settingStore/setTabVisible', false);
      this.$store.commit('settingStore/setFormShopCar', true);
      const id = e.skuId;

      let norms: any = {}
      this.shopCarList.forEach(item => {
        if (item.skuId === String(id)) {
          this.goodDetail = item;
        }
      });
      getMemberCardInfo({}).then(res => {
        const tem = res.consumeVos || res.integralVos || res.paymentVos || [];
        const integralVos = tem;
        this.goodDetail.skuStocks.forEach((skuItem) => {
          skuItem.getType = false;
          skuItem.maxNum =
            skuItem.perLimit < skuItem.stock ? skuItem.perLimit : skuItem.stock;
          if (
            skuItem.memberType !== 0 &&
            skuItem.memberType !== 3 &&
            skuItem.memberPrices.length > 0
          ) {
            skuItem.memberPrices.forEach(memItem => {
              if (memItem.memberLevelId === memberLevel) {
                skuItem.memPrice =
                  skuItem.memberType === 1 ?
                  memItem.memberPrice :
                  (skuItem.price * memItem.memberPrice) / 100;
                skuItem.memPrice = skuItem.memPrice.toFixed(2);
              }
            });
          }
          if (skuItem.memberType === 3 && integralVos) {
            integralVos.forEach(memItem => {
              if (memItem.rankCode === memRank) {
                const value = memItem.memberPrivilegeVos.filter(inItem => {
                  if (inItem.isSelected === 1 && inItem.ptype === "1") {
                    return inItem.value;
                  }
                });
                if (value.length > 0) {
                  skuItem.memPrice = (skuItem.price * value[0].value) / 100;
                  skuItem.memPrice = skuItem.memPrice.toFixed(2);
                }
              }
            });
          }
          if (skuItem.id === String(id)) {
            skuItem.getType = true;
            norms = skuItem;
            if (this.goodDetail.actPrice !== "0.00") {
              norms.price = this.goodDetail.actPrice ?
                this.goodDetail.actPrice.toFixed(2) :
                this.goodDetail.price.toFixed(2);
            } else {
              norms.price = this.goodDetail.price;
            }
          }
        });
        this.showType = true
        this.popType = "sku"
        this.goodDetail
        this.norms = norms
      });
    }

    closeSku(){
      this.showType = false
    }

    

  checkNorms(check) {
    this.goodDetail.skuStocks.forEach(item => {
      item.getType = false;
      if (item.id === check.id) {
        item.getType = true;
      }
    });
    // this.getNorms=check.detail
    // this.goodDetail=this.goodDetail
    this.setData({
      norms: check,
      goodDetail: Object.assign({},this.goodDetail),
    });
  }
    /**
     * 购物车删除单个商品
     */
    async delGood(e) {
      const itemIndex = e;
      const apiShoppingCartDtos = [] as any;
      apiShoppingCartDtos.push(this.shopCarList[itemIndex]);
      this.$Popup.modal({
        title:"删除商品",
        content:'确认删除此商品吗，删除后可再次添加购物车'
      }).then(() => {
        delCarsList(apiShoppingCartDtos)
          .then(() => {
            uni.showToast({
              title: "删除成功",
              icon: "none"
            });
          })
          .then(() => {
            this.getList();
          });
      });
    }
    /**
     * 编辑开关
     */
    eidtList() {
      this.editFlag = !this.editFlag
    }
    /**
     * 修改购物车商品数量
     */
    changeNum(e) {
      // 做节流操作
      if (e.code === 100) {
        uni.showToast({
          title: "已达限购数量",
          icon: "none"
        });
        return;
      }

      if (e.code === 200) {
        uni.showToast({
          title: "库存不足",
          icon: "none"
        });
        return;
      }

      // if (this.timeout) {
      //   clearTimeout(this.timeout);
      // }
      // this.timeout = setTimeout(() => {
    
      const currentIndex = e.index;
      const currentItem = this.shopCarList[currentIndex];
      const oldItem = this.temShopList[currentIndex];
      currentItem.goodsNumber = e.num;

      this.editShopCar(currentItem, oldItem, 0);
      if (currentItem.isCheck) {
        this.getAllPrice();
      }
      this.shopCarList[currentIndex].goodsNumber = currentItem.goodsNumber
      //   [`shopCarList[${currentIndex}].goodsNumber`]: currentItem.goodsNumber,
      this.$emit("shopCarChange", {}, {});
      // }, 300);
    }
    /**
     * 购物车重新修改规格
     */
    addShopCar(e) {
      // FIXME 
      const currentItem = e.goodDetail;
      let oldItem = {}
      this.shopCarList.forEach((item, index) => {
        if (item.itemIndex === currentItem.itemIndex) {
          oldItem = this.temShopList[index];
        }
      });
      this.editShopCar(currentItem, oldItem, 1);
    }
    /**
     * 编辑购物车商品
     */
    editShopCar(newItem, oldItem, type) {
      const params = {
        oldApiShoppingCartDto: {
          ...oldItem
        },
        newApiShoppingCartDto: {
          ...newItem
        },
      };
      editCarsList(params)
        .then(() => {
          this.showType = false
          this.$store.commit('settingStore/setTabVisible', true);
          this.$emit("shopCarChange", {}, {});
          if (type) {
            this.getList();
          }
        })
        .catch(err => {
          uni.showToast({
            icon: "none",
            title: `${err}`,
          });
        });
    }
    /**
     * 清空失效商品
     */
    emptyUseless() {
      const ids = [] as any;
      this.shopLoseCarList.forEach((item: any) => {
        ids.push(item.skuId);
      });
      this.$Popup.modal({
        title:'清空商品',
        content:'确认清空失效商品吗'
      }).then(() => {
          emptyCarsList(ids).then(() => {
            uni.showToast({
              icon: "none",
              title: "清空成功",
            });
            this.getList();
          });
        })
        .catch(err => {
          uni.showToast({
            icon: "none",
            title: `${err}`,
          });
        });
    }
    /**
     * 完成编辑
     */
    eidtFinish() {
      this.editFlag = false
    }
    /**
     * 全选/取消全选
     */
    chooseAll(n) {
      const shopCarList = this.shopCarList;
      const selectList = [] as any;
      if (this.shopCarList.length === 0) {
        return;
      }
      shopCarList.forEach(item => {
        item.isCheck = n;
        if (item.isCheck) {
          selectList.push(item);
        }
      });
      this.shopCarList = shopCarList
      this.selectAll = [n]
      this.selectList = selectList
      this.getAllPrice();
    }
    /**
     * 删除购物车
     */
    async deleteButton() {
      const selectList = this.getSelectList();
      if (selectList.length === 0) {
        uni.showToast({
          title: "请先选择要删除商品",
          icon: "none"
        });
        return;
      }
      if (this.isAddCollect) {
        delCarsList(selectList).then(() => {
          this.isAddCollect = false;
          this.getList();
        });
      } else {
        this.$Popup.modal({
          title:"删除商品",
          content:'确认删除选中商品吗，删除后可再次添加购物车'
        }).then(() => {
          delCarsList(selectList).then(() => {
            uni.showToast({
              icon: "none",
              title: "删除成功",
            });
            this.getList();
            this.$store.state.userStore.getShopCarNum();
          })
        });
      }
    }
    /**
     * 统计总价
     */
    getAllPrice() {
      const allPrice = this.shopCarList.reduce((prev, current: any) => {
        const currentPrice = current.isCheck ?
          current.price * current.goodsNumber :
          0;
        return prev + currentPrice;
      }, 0);
      this.allPrice = allPrice.toFixed(2)
    }
    getSelectList() {
      return this.shopCarList.filter(item => item.isCheck);
    }
    /**
     * 购物车上领取优惠券
     */
    myCouponGet(options) {
      const currentItem = this.couponList[options.index] as any;
      getOneCoupon(options.id, {})
        .then(() => {
          currentItem.restNum = currentItem.restNum - 1;
          if (currentItem.restNum === 0) {
            currentItem.hasUse = !currentItem.hasUse;
          }
          this.couponList[options.index] = currentItem
          //   [`couponList[${options.detail.index}]`]: currentItem,
          uni.showToast({
            title: "领取成功",
            icon: "none",
            duration: 500
          });
        })
        .catch(() => {
          uni.showToast({
            title: "优惠券已被领光",
            icon: "none",
            duration: 1000
          });
          currentItem.hasUse = !currentItem.hasUse;
          this.couponList[options.index] = currentItem
        });
    }
    /**
     * 返回首页
     */
    gotoHome() {
      this.$store.dispatch('settingStore/backHome');
    }

    /**
     * 页面离开
     */
    async onDetached() {
      this.$store.commit('settingStore/setFormShopCar', false);
      this.getList();
    }
     // 关闭pop弹窗
    popClose(e){
      this.showType=e
    }
  }
</script>
<style lang="scss" scoped>
  @include b(shop) {
    $p-l: 10px;

    @include e(car) {
      background: $main-background;
      min-height: 650px;
      padding: 0px 0 80px;

      @include m(control) {
        background: #fff;
        font-size: 14px;
        padding: 0px $p-l 0;
        margin-bottom: -1px;
      }

      @include m(container) {
        @include flex(space-between);
        padding-top: 10px;
        width: 100%;
        border-bottom: 1px solid $main-border-color;
        padding-bottom: 10px;
        background-color: white;
        border-radius: 10px;
        margin-bottom: 10px;

        @include m(item) {
          display: flex;
          align-items: center;
          padding-left: 10px;
        }
      }

      @include m(unable) {
        width: 90px;
        height: 90px;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        left: 42px;
        @include flex(center, center);
        border: 2px solid white;
      }

      @include m(goods) {
        // @include flex(flex-start);
        width: 100%;
        padding: 10px;
        padding-top: 65px;
        padding-bottom: 6px;
      }

      .clear {
        color: $main-light-color;
      }
    }
  }

  .topSelect {
    display: flex;
    font-size: 14px;
  }

  .topSelect__left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 35px;
    border: 1px solid #ff4444;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border-right: none;
  }

  .topSelect__right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 35px;
    border: 1px solid #ff4444;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-left: none;
  }

  .shop__car--top {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 10;
  }

  .shop__car--top--container {
    padding: 0px 20px;
    // @include flex(space-between);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-bottom: 1px solid $main-border-color;
    padding-bottom: 10px;
    background-color: white;
  }

  .shopNoCar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: white;
  }

  .shop__noCar {
    margin-top: 70px;
    width: 69%;
  }

  .shop__noCar--text {
    display: flex;
    justify-content: center;
    color: #acacac;
    width: 100%;
  }

  .shop__noCar--buyButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 40px;
    border-radius: 50px;
    color: #e4322c;
    border: 1px solid #e4322c;
    margin-top: 20px;
    font-size: 14px;
  }

  .submit {
    bottom: 40px;
  }

  @include b(pageBottom) {
    position: fixed;
    // bottom: 80px; 11iPhone
    // bottom: 48px;
    bottom: calc(88rpx + constant(safe-area-inset-bottom));
    bottom: calc(88rpx + env(safe-area-inset-bottom));
    z-index: 10;
    width: 100%;
    height: 47px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;

    @include e(check) {
      width: 62%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 17px;
      height: 100%;

      @include m(allPrice) {
        height: 100%;
        display: flex;
        align-items: center;

        @include m(price) {
          margin-left: 10px;
          color: #ff4444;
          font-size: 15px;
          font-weight: bold;
        }
      }
    }

    @include e(button) {
      width: 34%;
      height: 100%;
      background-color: #ff4444;
      @include flex(center, center);
      color: white;
      font-size: 17px;
    }

    @include e(delBtn) {
      width: 60px;
      height: 27px;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      font-size: 14px;
      border: 1px solid #ff4444;
      color: #ff4444;
      border-radius: 50px;
      margin-right: 20px;
    }
  }

  .moveCollect {
    margin-right: 20px;
    width: 75px;
    height: 27px;
    border: 1px solid #ff4444;
    color: #ff4444;
    border-radius: 50px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>